<template>
  <div class="compare">
    <transition
      v-for="(item, index) in selectedList"
      :key="item.index"
      :enter-active-class ="`animate__fadeIn${index % 2 ? 'Up' : 'Down'}Big`"
      :leave-active-class="`animate__fadeOut${index % 2 ? 'Up' : 'Down'}Big`"
    >
      <compare-product
        :baseUrl="baseUrl"
        :item="item"
        :index="index"
        v-show="isShow"
        class="animate__animated"
      ></compare-product>
    </transition>
    <div class="cha" @click="close">&times;</div>
  </div>
</template>

<script>
import compareProduct from './components/compareProduct.vue' // 比较页面的产品

export default {
  props: ['selectedList', 'baseUrl'],
  components: {
    compareProduct
  },
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    close () {
      this.isShow = false
      this.$emit('change', true)
    }
  },
  mounted () {
    this.isShow = true
    // console.log(this.isShow)
  }
}
</script>

<style lang="scss" scoped>
.compare {
  width: 100%;
  height: 100%;
  display: flex;

  .item {
    flex: 1;
  }
}

.cha {
  position: fixed;
  top: 0.04rem;
  right: 0.14rem;
  font-size: 0.4rem;
  color: #eee;
  font-weight: 900;
  cursor: pointer;
}
</style>
